﻿<link href="~/css/site.css" rel="stylesheet" />
<script src="~/vue/dist/vue.global.js"></script>
<link href="~/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/element-plus/dist/index.full.js"></script>
<script src="~/axios/dist/axios.js">    </script>
<div id="app">
    <el-row>
        <el-col :span="24">
            您正在做的业务是：人力资源--权限管理--添加
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24" style="text-align: right">
            <el-button type="primary" v-on:click="Add()">提交</el-button>
            <el-button v-on:click="Fh()">返回</el-button>
        </el-col>
    </el-row>
    <el-row style="height: 10px"></el-row>
    <el-row style="text-indent: 10px">
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            用户名称
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="user.UName" size="small" style="width: 250px;" />
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            用户密码
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="user.UPassWord" size="small" style="width: 250px;" />
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            真实姓名
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-input v-model="user.UTrueName" size="small" style="width: 250px;" />
        </el-col>
        <el-col :span="6" style="border: 1px solid black; background-color: #ffd553;">
            用户身份
        </el-col>
        <el-col :span="6" style="border: 1px solid black;">
            <el-select v-model="userRoles.rolesID" size="small" style="width: 250px;" placeholder="请选择">
                <el-option v-for="i in data" :label="i.rolesName" :value="i.rolesID" />
            </el-select>
        </el-col>
    </el-row>
</div>

<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
    const { ElMessage } = ElementPlus
    var app = createApp({
        setup() {
            const data = ref([])
            const user = reactive({
                UName: null,
                UTrueName: null,
                UPassWord: null,
            })
            const userRoles = reactive({
                rolesID: null,
                userID: null
            })
            function Show() {
                axios.get("/Roles/GetRole2")
                    .then(res => {
                        data.value = res.data
                    })
                    .catch(err => {
                        console.log(err);
                    })
            }
            function Add() {
                axios.post("/Roles/UserAdd", null, {
                    params: user
                })
                .then(res => {
                    axios.get("/Roles/UserDesc").then(res=>{
                        userRoles.userID = res.data.uId
                        axios.post("/Roles/UserRolesAdd",{
                            userRolesAddDto:userRoles
                        }, {
                        headers: {
                            "Content-type": "application/x-www-form-urlencoded",
                            //或其他格式
                        }
                    }).then(res=>{
                            if(res.data>0){
                                ElMessage({
                                type: 'success',
                                message: '添加成功！'});
                                setInterval(()=>{
                                    window.location.href = "/Roles/Index1"
                                },1000)
                            }
                        }).catch(error=>{
                            console.info(erro)
                        })
                    }).catch(error=>{
                        console.info(error)
                    })
                })
                .catch(err => {
                    console.log(err);
                })
            }
            function Fh() {
                window.history.back()
            }
            Show()
            return {
                user,
                data,
                Add,
                Fh,userRoles
            }
        }
    })
    app.use(ElementPlus)
    app.mount('#app')
</script>

<style scoped>
    body {
        background-color: #ffffcc;
    }

</style>